<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <acc-set-card></acc-set-card>
        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <div class="handle-box flex flex-center">
                <el-button type="primary" icon="el-icon-folder" @click="saveEdit()">保存</el-button>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
                <el-form-item label="账套代码" prop="setBookId">
                    <el-select v-model="ruleForm.setBookId" placeholder="请选择">
                        <el-option
                            :label="item.description"
                            :value="item.setBookId"
                            v-for="(item, index) in accList"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="年度" prop="accYear">
                    <el-date-picker
                        v-model="ruleForm.accYear"
                        value-format="yyyy"
                        type="year"
                        placeholder="选择年"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script>
import appMain from '../../../utils/app_main';
import _ from 'lodash';
import XEUtils from 'xe-utils';

export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            //会计期间
            periodList: [],
            rules: {
                setBookId: [{ required: true, message: '请选择账套', trigger: 'change' }],
                accYear: [{ required: true, message: '请选择', trigger: 'change' }]
            },
            ruleForm: {
                setBookId: '', //帐套编号
                year: '' //年份
            }, //新增model
            editForm: {},
            isUpdate: false,
            //账套列表
            accList: [
                {
                    id: '1', //账套id
                    setBookId: 'E9B34B',
                    description: 'AAA' //账套名称
                },
                {
                    id: '2', //账套id
                    setBookId: '1',
                    description: 'CCC' //账套名称
                }
            ]
        };
    },
    created() {
        this.setBooksFindAll();
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 200;
        this.pageTitle = this.$router.currentRoute.meta.title;
        //$refs.xTree.setAllTreeExpand(true);
    },
    methods: {
        setBooksFindAll() {
            appMain
                .setBooksFindAll({})
                .then(res => {
                    if (res.data.code === 20000) {
                        this.accList = res.data.data;
                        this.ruleForm.setBookId = this.$store.state.accountSet.setBookId;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        addRate() {
            appMain
                .accPeriodGenerate(this.ruleForm.setBookId, this.ruleForm.accYear)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$message.success(res.data.message);
                        this.$router.push({
                            path: '/fiscalPeriod' //跳转的路径
                        });
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submitForm(formName) {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    if (formName == 'ruleForm') {
                        this.addRate();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        saveEdit() {
            if (this.isUpdate == false) {
                this.submitForm('ruleForm');
            }
        }
    },
    computed: {},
    watch: {},
    filters: {}
};
</script>

<style lang="css" scoped>
.el-card {
    height: 100%;
}

.flex-right {
    padding: 20px;
}

.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}

.el-input {
    max-width: 215px;
}
</style>